<template>
	<view class="u-flex u-flex-wrap u-m-t-10 img-select" v-if="$SelectData && $SelectData[key_id] && $SelectData[key_id].imgList">
		<view class="img-box" v-for="(item, i) in $SelectData[key_id].imgList">
			<u-image @click="selectimg" width="160rpx" height="160rpx" :src="$BasicsUrl + '/' + item"></u-image>
			<view class="closeBtn" @click="closeImg(i)"><u-icon size="48rpx" name="close-circle-fill"></u-icon></view>
		</view>
		<view class="img-box" @click="selectimg" v-if="$SelectData[key_id].imgList.length < $SelectData[key_id].Limit"><u-icon size="48rpx" name="photo-fill"></u-icon></view>
	
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
export default {
	name: 'select-img',
	data() {
		return {};
	},
	props: {
		//唯一代码
		key_id: {
			type: String,
			default: function() {
				return '';
			}
		}
	},
	computed: {
		...mapState({
			$SelectData: state => state.$SelectData,
			$BasicsUrl: state => state.$BasicsUrl
		})
	},
	methods: {
		selectimg() {
			uni.$u.route('/pages/map-storage/map-storage', {
				id: this.key_id
			});
		},
		closeImg(i) {
			this.$SelectData[this.key_id].imgList.splice(i, 1);
			this.$store.commit('setSelectData', this.$SelectData);
		}
	}
};
</script>

<style lang="scss">
.img-box {
	width: 160rpx;
	height: 160rpx;
	background: #f4f5f7;
	border-radius: 6rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10rpx;
	margin-bottom: 10rpx;
	position: relative;
}
.img-select {
}
.closeBtn {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;

	top: 0;
	right: 0;
	z-index: 1002;
}
</style>
